<template>
  <f7-page class="page">
    <qm-currentcy-navbar title="按钮">
      <template #nav-right>
        <f7-icon f7="ellipsis"></f7-icon>
      </template>
    </qm-currentcy-navbar>
    <f7-block-title>按钮</f7-block-title>
    <f7-block>
      <f7-row class="row">
        <f7-col>
          <qm-button :fill="true" type="primary" title="主要操作 Normal" href="/business/app/list"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col>
          <qm-button type="primary" title="主要操作线框 Normal1"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col>
          <qm-button title="辅助操作 Normal" @click="click"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col>
          <qm-button title="辅助操作"></qm-button>
        </f7-col>
        <f7-col>
          <qm-button type="primary" :fill="true" title="主要操作"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col>
          <qm-button style="margin: 0 auto" type="primary" size="small" title="短按钮 Normal"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col>
          <qm-button type="warn" title="警告类操作 Normal"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col>
          <qm-button type="warn" :fill="true" title="警告类操作 Normal"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col>
          <qm-button type="primary" :fill="true" title="线框按钮主标题 Normal" subTitle="短按钮副文本副文本 Normal"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col>
          <qm-button type="primary" size="mini" title="胶囊按钮"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col>
          <qm-button type="primary" title="线框按钮主标题 Normal" subTitle="短按钮副文本副文本 Normal"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col width="100">
          <qm-button type="primary" size="mini" :fill="true" :disabled="disabled" title="胶囊按钮"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col width="100" class="permis">
          <qm-radio v-model="check_1" class="qm-radio"></qm-radio>
          <span>同意</span>
          <span class="agreement">《用户授权协议》</span>
        </f7-col>
        <f7-col width="100" style="margin-top: 20px">
          <qm-button type="primary" :fill="true" :disabled="!check_1" title="提交"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row>
        <f7-col width="100">
          <qm-button type="primary" size="mini" :fill="true" title="胶囊按钮"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col width="100" class="permis">
          <qm-radio v-model="check_2"></qm-radio>
          <span>同意</span>
          <span class="agreement">《用户授权协议》</span>
          <br />
        </f7-col>
        <f7-col width="100" style="margin-top: 20px">
          <qm-button type="primary" :fill="true" :disabled="!check_2" title="同意协议并提交"></qm-button>
          <qm-button title="暂不开通，仅手动缴费" style="margin-top: 12px;"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col width="100">
          <qm-button type="primary" :fill="true" title="同意协议并提交"></qm-button>
        </f7-col>
        <f7-col style="margin-top: 7px">
          <div style="font-size: 10px; color: #9ea7b7">
            查看
            <span class="agreement">《ETC服务用户协议》</span>，授权ETC服务获取身份证、收货地址用于申请ETC，关注车主服务生活号获取审核；
          </div>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col width="100" class="permis">
          <qm-radio v-model="check_3"></qm-radio>
          <span>同意</span>
          <span class="agreement">《用户授权协议》</span>
        </f7-col>
        <f7-col width="100" style="margin-top: 20px">
          <qm-button type="primary" :fill="true" :disabled="!check_3" title="提交"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col width="100" class="permis">
          <qm-radio v-model="check_4"></qm-radio>
          <span>同意</span>
          <span class="agreement">《用户授权协议》</span>
        </f7-col>
        <f7-col width="100" style="margin-top: 20px">
          <qm-button type="primary" :fill="true" title="同意协议并提交" :disabled="!check_4"></qm-button>
        </f7-col>
      </f7-row>
      <f7-row class="row">
        <f7-col width="100" class="permis">
          <qm-radio v-model="check_5"></qm-radio>
          <span>同意</span>
          <span class="agreement">《用户授权协议》</span>
        </f7-col>
        <f7-col width="100" style="margin-top: 20px">
          <qm-button type="primary" :fill="true" :disabled="!check_5" title="提交"></qm-button>
        </f7-col>
      </f7-row>

      <div class="fixed f1">
        <f7-row>
          <f7-col>
            <qm-button :fill="true" type="primary" title="主要操作 Normal" href="/business/app/list"></qm-button>
          </f7-col>
        </f7-row>
      </div>

      <div class="fixed f2">
        <f7-row>

          <f7-col>
            <qm-button title="辅助操作"></qm-button>
          </f7-col>
          <f7-col>
            <qm-button type="primary" :fill="true" title="主要操作"></qm-button>
          </f7-col>
        </f7-row>
      </div>
    </f7-block>
  </f7-page>
</template>

<script scoped>
export default {
  data() {
    return {
      disabled: true,
      check_1: false,
      check_2: true,
      check_3: true,
      check_4: true,
      check_5: true,
    };
  },
  methods: {
    click(e) {
      console.log("click", e);
    },
    agree() {
      this.disabled = !this.disabled;
    },
  },
};
</script>

<style lang="less" scoped>
.row {
  margin-top: calc(124px * var(--ratio));

  &:first-child {
    margin-top: 0;
  }

}

.permis {
  display: flex;
  align-items: center;
  font-size: var(--font-size-maincontent);
  color: var(--color-text-title);

}

.agreement {
  color: var(--color-text-primary);
}

.qm-radio {
  margin-right: 8px;
}

.fixed {
  width: calc(100% - calc(32px * 2 * var(--ratio)));
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  height: calc(144px * var(--ratio));
  background-color: #fff;
  &.f1 {
    bottom: calc(144px * var(--ratio));
  }

  & > .row {
    flex: 1;
  }
}
</style>
